<template>
    <div>
        <Header></Header>
        <Search :cities="cities"></Search>
        <List :cities="cities" :hotCities="hotCities" :letter="letter"></List>
        <Alphabet :cities="cities" @handleChange="getChange"></Alphabet>
    </div>
</template>

<script>
import Header from '@/components/city/Header.vue'
import Search from '@/components/city/Search.vue'
import List from '@/components/city/List.vue'
import Alphabet from '@/components/city/Alphabet.vue'
    export default {
        data() {
            return {
                cities:{},
                hotCities:[],
                letter:'',
            }
        },
        methods: {
            getCityInfo(){
                this.$http('city.json')
                .then(res=>{
                    res=res.data
                    console.log(res)
                    if(res.data && res.ret){
                        this.cities=res.data.cities
                        this.hotCities=res.data.hotCities
                    }
                })
                .catch(err=>err)
            },
            getChange(letter){
                this.letter=letter
            }
        },
        mounted() {
            this.getCityInfo()
        },
        components:{
            Header,
            Search,
            List,
            Alphabet
        }   
    }
</script>

<style lang="stylus" scoped>

</style>